<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" href="resources/css/jquery-ui.css" 		rel="stylesheet" />
	<link type="text/css" href="resources/css/flexigrid.css" 		rel="stylesheet">
	<link type="text/css" href="resources/css/main.css" 			rel="stylesheet"/>
	<link type="text/css" href="resources/css/ui.jqgrid.css"  media="screen" 	rel="stylesheet" />
	
	<script type="text/javascript" src="resources/jquery.min.js"></script>
	<script type="text/javascript" src="resources/jquery-ui.min.js"></script>
	<script type="text/javascript" src="resources/flexigrid.js"></script>
	
	<script type="text/javascript" src="resources/i18n/grid.locale-en.js" ></script>
	<script type="text/javascript" src="resources/jquery.jqGrid.src.js" ></script>
	
    <style>
    #toolbar {
        padding: 10px 4px;
    }
    
    #jqUserOrderList {
        font-size: 14px;
    }
    
    </style>	
<script type="text/javascript">
function approveOrder(orderId){
 		//alert('submit=' + orderId);
 		  $.ajax({
	          url : 'json/entity/userOrder/approve',
	          type: 'POST',
	          dataType : "json",
	          data : {
	        	  id : orderId
	          		},
	          success : function(data) {
	        	  $("#jqUserOrderList").trigger("reloadGrid");
	          		},
	          error: function() {
	         	            alert('Error occured');
	         	        }   	          		
      	});
 	};

 	function rejectOrder(orderId){
 		//alert('submit=' + orderId);
 		  $.ajax({
	          url : 'json/entity/userOrder/reject',
	          type: 'POST',
	          dataType : "json",
	          data : {
	        	  id : orderId
	          		},
	          success : function(data) {
	        	  $("#jqUserOrderList").trigger("reloadGrid");
	          		},
	          error: function() {
	         	            alert('Error occured');
	         	        }   	          		
      	});
 	}; 	

var lastSel = "";
$(function(){ 
	
	/* ------------------ GRID FUNCTION ----------------- */	
  $("#jqUserOrderList").jqGrid({
	jsonReader : {
	      root:"rows",
	      page: "page",
	      total: "total",
	      records: "records",
	      repeatitems: false,
	      id: "0"
	   },	  
    url:'json/entity/userOrder/admin',
    datatype: 'json',
    mtype: 'POST',
    colNames:['№','Фирма' ,'Номер заказа', 'Дата заказа', '','','Статус заказа',''],
    colModel :[ 
      {name:'id', 			index:'id', 					width:10, sortable:false },
      {name:'secUser.company', 			index:'secUser.company', width:100, sortable:false },
      {name:'orderNr',		index:'orderNr', 				width:30, sortable:false },   
      {name:'orderDate',	index:'orderDate', 				width:30},
      {name:'id', 			index:'id', 					width:90, align:'center', 
    	  fixed:true, sortable:false, resize:false, formatter: approveFormatter},
      {name:'id', 			index:'id', 					width:90, align:'center', 
    	  fixed:true, sortable:false, resize:false, formatter: rejectFormatter},    	  
      {name:'orderStatus',	index:'orderStatus', 			width:100, align:'center', 
    	  fixed:true, resize:false, formatter: statusFormatter },
      {name:'id', 			index:'id', 					width:80, align:'center', 
				    	    fixed:true, sortable:false, resize:false, hidden: true}
    ],
    pager: '#pager',
    toppager: false,
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'id',
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,
    autowidth: true,
    height: 'auto',
    caption: 'User Orders',
    search: true,
    postData: 	{ filters:{	
					    	company: 		function() { return $('#pCompany').val(); },
						   	state: 		function() { return $('#pState').val(); },
							dateFrom: 		function() { return $('#pDateFrom').val(); },
						 	dateTo: 		function() { return $('#pDateTo').val(); }
						 	}
	},
    editurl : 'json/entity/userOrder/edit',
	    subGrid: true,
		caption: "Custom Icons in Subgrid",
		// define the icons in subgrid
		subGridOptions: {
			"plusicon"  : "ui-icon-triangle-1-e",
			"minusicon" : "ui-icon-triangle-1-s",
			"openicon"  : "ui-icon-arrowreturn-1-e"
		},
	subGridRowExpanded: function(subgrid_id, row_id) {
		var subgrid_table_id, pager_id;
		subgrid_table_id = subgrid_id+"_t";
		pager_id = "p_"+subgrid_table_id;
		$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll' style=' font-size: 16px;'></table>");
		jQuery("#"+subgrid_table_id).jqGrid({
			jsonReader : {
			      root:"rows",
			      page: "page",
			      total: "total",
			      records: "records",
			      repeatitems: false,
			      id: "0"
			   },
			url:'json/entity/userOrderDetail?orderId=' + row_id,
			datatype: 'json',
			colNames: ['â','ÐÐ½Ð².â','Ð¤Ð¾ÑÐ¾','ÐÐ°ÑÐ°Ð»Ð¾', 'ÐÐºÐ¾Ð½ÑÐ°Ð½Ð¸Ðµ', 'Ð ÐµÐ·ÐµÑÐ²Ð°ÑÐ¸Ñ'],
			colModel: [
				{name:'id',index:'id',width:80,key:true, sortable:false },
				{name:'advertisingRegistry.inventarNr', 	   	index:'advertisingRegistry.inventarNr', 	width:100, sortable:false },
				{name:'photo', 				index:'photo',				width:120, formatter: photoFormatter, sortable:false },      
				{name:'beginCommandDate',index:'beginCommandDate'	,width:120, sortable:false },
				{name:'endCommandDate',index:'endCommandDate'		,width:120, sortable:false },
				{name:'reservationType',index:'reservationType'		,width:180, sortable:false, formatter: reservationFormatter }
			],
		   	rowNum:20,
		   	sortname: 'num',
		    sortorder: 'asc',
		    height: '100%'
		});
	}
	
	
  }); 
	
  function approveFormatter(cellvalue, options, rowObject) {
	  if (rowObject['orderStatus'] == 1 ||rowObject['orderStatus'] == 3 ){
		  var buName = "bt_"+rowObject['id'];
		  var ret ="<input type='button'  value='Approve' onclick=\"approveOrder('"+rowObject['id']+"');\" />";
		  return ret;
	  } else {
		  return "";
	  }
	}; 
	
  function rejectFormatter(cellvalue, options, rowObject) {
	  if (rowObject['orderStatus'] == 1 ){
		  var buName = "bt_"+rowObject['id'];
		  var ret ="<input type='button'  value='Reject' onclick=\"rejectOrder('"+rowObject['id']+"');\" />";
		  return ret;
	  } else {
		  return "";
	  }
	}; 	
	
	function photoFormatter(cellvalue, options, rowObject) {
		return "<img src='images/small/" + (rowObject['advertisingRegistry'])['inventarNr'] + "' width='120' alt='Photo' title='PHOTO' />";
	}; 
	
	function statusFormatter(cellvalue, options, rowObject) {
		if (cellvalue==0) return "ÐÑÐ¾ÐµÐºÑ"; 
		if (cellvalue==1) return "ÐÐ° ÑÑÐ²ÐµÑÐ¶Ð´ÐµÐ½Ð¸Ðµ";
		if (cellvalue==2) return "Ð£ÑÐ²ÐµÑÐ¶Ð´ÐµÐ½Ð¾";
		if (cellvalue==3) return "ÐÑÐºÐ»Ð¾Ð½ÐµÐ½Ð¾";
	};	
	
	function reservationFormatter(cellvalue, options, rowObject) {
		if (cellvalue==0) return "Ð¡Ð²Ð¾Ð±Ð¾Ð´Ð½Ð¾"; 
		if (cellvalue==1) return "ÐÐ°ÑÐµÐ·ÐµÑÐ²Ð¸ÑÐ¾Ð²Ð°Ð½Ð¾";
		if (cellvalue==2) return "ÐÑÐ¾Ð´Ð°Ð½Ð¾ Ð¿Ð¾ Ð´Ð¾Ð³Ð¾Ð²Ð¾ÑÑ";
	};	
	
	function photoFormatter(cellvalue, options, rowObject) {
		return "<img src='images/small/" + (rowObject['advertisingRegistry'])['inventarNr'] + "' width='120' alt='Photo' title='PHOTO' />";
	};   

	function priceFormatter(cellvalue, options, rowObject) {
  		return cellvalue + " \u20AC";
	};   

	
});
	
$(function() {
    $( "#pDateFrom" ).datepicker({
    	dateFormat: "dd.mm.yy",
    	autoSize: true,
        changeMonth: true,
        changeYear: true,
        showOn: "button",
        buttonImage: "resources/css/images/calendar.gif",
        buttonImageOnly: true,
        showButtonPanel: true,
        defaultDate: "+1w",
        onClose: function( selectedDate ) {
            $( "#pDateTo" ).datepicker( "option", "minDate", selectedDate );
        }
    });
    
    $( "#pDateTo" ).datepicker({
    	dateFormat: "dd.mm.yy",
    	autoSize: true,
    	changeMonth: true,
        changeYear: true,
        showOn: "button",
        buttonImage: "resources/css/images/calendar.gif",
        buttonImageOnly: true,
        showButtonPanel: true,
        defaultDate: "+1w",
        onClose: function( selectedDate ) {
            $( "#pDateFrom" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
    
 /* ------------------ FILTERS FUNCTION ----------------- */	  
 	
	$("#btResetFilter").click(function(){
		$("#pCompany").val("");
		$("#pState").attr('value', '-1');
		$("#pDateFrom").val("");
		$("#pDateTo").val("");
		
		$("#jqUserOrderList").trigger("reloadGrid");
	});
	
	$("#btApplyFilter").click(function(){
		$("#jqUserOrderList").trigger("reloadGrid");
	});    
});	


</script>	
	<title>Insert title here</title>
</head>
<body>

<div class="ui-jqgrid ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix" style="padding: .2em .2em .2em .2em;" >
	<span class="ui-jqgrid-title" style="font-size: 0.9em;">Фильтрационные параметры</span>
</div>
<div id="filtrationPanel" class="ui-userdata ui-state-default" style="padding: .2em .2em .2em .2em;">
<!-- 	<label for="pCompany">Company :</label> -->
	<input type="text" id="pCompany" class="ui-widget" style="visibility: hidden;">
	
	<label for="pDateFrom">Date from :</label>
		<input type="text" id="pDateFrom" class="ui-widget">
	<label for="pDateTo">to :</label>
		<input type="text" id="pDateTo" class="ui-widget">
	<label for="pState">Status :</label>
		<select id="pState" class="ui-widget">
	        <option value="-1">ÐÑÐµ ÑÑÐ°ÑÑÑÑ</option>
	        <option value="0">ÐÑÐ¾ÐµÐºÑ</option>
	        <option value="1">ÐÐ° ÑÑÐ²ÐµÑÐ¶Ð´ÐµÐ½Ð¸Ðµ</option>
	        <option value="2">Ð£ÑÐ²ÐµÑÐ¶Ð´ÐµÐ½Ð¾</option>
	        <option value="3">ÐÑÐºÐ»Ð¾Ð½ÐµÐ½Ð¾</option>
	    </select>
	
	
	
	<input id="btApplyFilter" type="button" value="Отфильтровать">
	<input id="btResetFilter" type="button" value="Очистить фильтр">
</div>

<div id="pager"></div>
<table id="jqUserOrderList">
	<tr><td/></tr>
</table>

</body>
</html>
